﻿@{
    ViewBag.Title = "Book";
}
@model IEnumerable<AirLine.Entities.SeatClass>
<script type="text/javascript">
    $(this).ready(function () {
        $("#menu li").removeAttr("class");
        $("#menu li").eq(2).attr("class", "menu_active");
    })  
</script>
<script src="~/Scripts/Book/index.js"></script>
<link href="~/Content/Book/index.css" rel="stylesheet" />
<div class="wrapper pad1">
    <ul class="breadcrumb" style="margin-left:37px">
        <li><a href="@Url.Action("Index","Home")">Home</a> <span class="divider">/</span></li>        
        <li class="active">Book</li>
    </ul>
    <article class="col1">
	    <div class="box1" style="box-shadow: 0 0 3px #373737;">
		   <ul class="nav nav-list font-weight-bold">
                <li class="nav-header">Book your trip</li>
                <li class="active"><a href="library">Flight</a></li>
                <li><a href="@Url.Action("FareFamilyDescription")">Fare Types and Rules</a></li>
                <li><a href="library">eTicket</a></li>
                <li><a href="library">Payment</a></li>
                <li><a href="#">Ticket Refund/Change</a></li>
              </ul> 
		</div>
        <a href="/Book"><img style="margin: 20px 50px auto" src="~/Content/Service/BookYourTripImage.jpg" /></a>
	</article>
<article class="col2">    
	<div class="tabs2">
			<ul class="nav">
				<li class="selected"><a href="#Flight">Flight</a></li>
				<li><a href="#Hotel">Hotel</a></li>
				<li class="end"><a href="#Rental">Rental</a></li>
			</ul>
			<div class="content">
				<div class="tab-content" id="Flight">
					<form id="form_5" class="form_5" method="post" action="@Url.Action("SearchFlight")">
						<div>
							<div class="radio">
								<div class="wrapper">
										<input type="radio" name="ShowType" value="1" checked>
										<span class="left">Show prices</span>
										<input type="radio" name="ShowType" value="2">
										<span class="left">Show flights</span>
								</div>
							</div>
							<div class="pad">
								<div class="wrapper under">
									<div class="col1">
										<div class="form_row"><span class="left">From</span>
											<input type="text" class="input" name ="AirportCodeFrom" id="AirportCodeForm">
											<a href="javascript:void(0)" class="help" rel="popover" data-placement="right" data-content="Please type airport code or city name you want to go" title="Airport From"></a>

										</div>
										<div class="form_row"><span class="left">To</span>
											<input type="text" class="input" name ="AirportCodeTo" id="AirportCodeTo">
											<a href="javascript:void(0)" class="help" rel="popover" data-placement="right" data-content="Please type airport code or city name you want to return from it" title="Airport To"></a>
										</div>
									</div>
									<div class="check_box">
										<input type="checkbox" name="IsOneway" value="1">
										<span>One way</span>
										<a href="javascript:void(0)" class="help" rel="popover" data-placement="bottom" data-content="If you do not want to return now, please check here" title="One Way"></a>               
									</div>
									<div class="check_box">
										<input type="checkbox" name="IsDirectFlight" value="1">
										<span>Direct flights</span>
									</div>
								</div>
								<div class="wrapper under">
									<span class="left">Flights</span>
									<div class="cols marg_right1">
										<h6>Departure flight</h6>
										<div class="form_row">
											<input type="text" class="input1" name="DepartureDate" id="DepartureDate">
											@*<input type="text" class="input1"  name="VariantDepartureDate" id="VariantDepartureDate" placeholder="+/-0 Days" disabled>*@
										</div>
										<div class="marg_top1">
											<div id="datepickerDeparture"></div>
										</div> 										
									</div>
									<div class="cols">
										<h5>Return flight</h5>
										<div class="form_row">
											<input type="text" class="input1" name="ReturnDate" id="ReturnDate">
											@*<input type="text" class="input1" name="VariantReturnDate" id="VariantReturnDate" placeholder="+/-0 Days" disabled>*@
										</div>
										<div class="marg_top1">
											<div id="datepickerReturn"></div>
										</div>										
									</div>
								</div>
								<div class="wrapper pad_bot1">
									<span class="left">Passengers</span>
									<div class="cols marg_right1">
										<div class="form_row">
											<input type="text" name="AdultsAmount" class="input2" value="2"  onblur="if(this.value=='') this.value='2'" onFocus="if(this.value =='2' ) this.value=''">
											<span class="left">Adults</span>
											<a href="javascript:void(0)" class="help"></a>
										</div>
										<div class="form_row">
											<input type="text" name="ChildrenAmount" class="input2" value="0"  onblur="if(this.value=='') this.value='0'" onFocus="if(this.value =='0' ) this.value=''">
											<span class="left">Children</span>
											<a href="javascript:void(0)" class="help"></a>
										</div>
									</div>
									<div class="cols">
										<div class="select1">
                                            <span class="left">Class</span>
                                            <select name="SeatClassId">
                                                @foreach (var item in Model)
                                                {
                                                    <option @(item.ClassName=="Phổ thông" ? "selected" : "") value="@item.Id">@item.ClassName</option>
                                                }
                                            </select>
											<a href="javascript:void(0)" class="help"></a>
										</div>
										<div class="select1">
                                            <span class="left">Airline</span>
                                            <select>
                                                <option>Airlines</option>
                                            </select>
											<a href="javascript:void(0)" class="help"></a>
										</div>
									</div>
									<span class="right relative"><a id="submit_flight" class="button1"><strong>Search</strong></a></span>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="tab-content" id="Hotel">
					<form id="form_6" class="form_5" method="post">
						<div>
							<div class="radio">
								<div class="wrapper">
										<input type="radio" name="name1" checked>
										<span class="left">Show prices</span>
										<input type="radio" name="name1">
										<span class="left">Show flights</span>
								</div>
							</div>
							<div class="pad">
								<div class="wrapper under">
									<div class="col1">
										<div class="form_row"><span class="left">From</span>
											<input type="text" class="input">
											<a href="#" class="help"></a>
										</div>
										<div class="form_row"><span class="left">To</span>
											<input type="text" class="input">
											<a href="#" class="help"></a>
										</div>
									</div>
									<div class="check_box">
										<input type="checkbox">
										<span>One way</span>
										<a href="#" class="help"></a>
									</div>
									<div class="check_box">
										<input type="checkbox">
										<span>Direct flights</span>
									</div>
								</div>
								<div class="wrapper under">
									<span class="left">Flights</span>
									<div class="cols marg_right1">
										<h6>Outbound flight</h6>
										<div class="row">
											<input type="text" class="input1" value="03.05.2011"  onblur="if(this.value=='') this.value='03.05.2011'" onFocus="if(this.value =='03.05.2011' ) this.value=''">
											<input type="text" class="input1" value="+/- 0 Days"  onblur="if(this.value=='') this.value='+/- 0 Days'" onFocus="if(this.value =='+/- 0 Days' ) this.value=''">
										</div>
										<div class="marg_top1">
											<div class="select1">
											<a href="#" class="marker_left"></a>
											<select><option>May 11</option><option>June 11</option><option>July 11</option></select>
											<a href="#" class="marker_right"></a>
											</div>
										</div>
										<div class="calendar">
											<ul class="thead">
												<li>Mon</li>
												<li>Tue</li>
												<li>Wed</li>
												<li>Thu</li>
												<li>Fri</li>
												<li>Sat</li>
												<li>Sun</li>
											</ul>
											<ul class="tbody">
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#">1</a></li>
												<li><a href="#">2</a></li>
												<li><a href="#">3</a></li>
												<li><a href="#">4</a></li>
												<li><a href="#" class="active">5</a></li>
												<li><a href="#">6</a></li>
												<li><a href="#">7</a></li>
												<li><a href="#">8</a></li>
												<li><a href="#">9</a></li>
												<li><a href="#">10</a></li>
												<li><a href="#">11</a></li>
												<li><a href="#">12</a></li>
												<li><a href="#">13</a></li>
												<li><a href="#">14</a></li>
												<li><a href="#">15</a></li>
												<li><a href="#">16</a></li>
												<li><a href="#">17</a></li>
												<li><a href="#">18</a></li>
												<li><a href="#">19</a></li>
												<li><a href="#">20</a></li>
												<li><a href="#">21</a></li>
												<li><a href="#">22</a></li>
												<li><a href="#">23</a></li>
												<li><a href="#">24</a></li>
												<li><a href="#">25</a></li>
												<li><a href="#">26</a></li>
												<li><a href="#">27</a></li>
												<li><a href="#">28</a></li>
												<li><a href="#">29</a></li>
												<li><a href="#">30</a></li>
												<li><a href="#">31</a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
											</ul>
										</div>
									</div>
									<div class="cols">
										<h5>Outbound flight</h5>
										<div class="row">
											<input type="text" class="input1" value="03.05.2011"  onblur="if(this.value=='') this.value='03.05.2011'" onFocus="if(this.value =='03.05.2011' ) this.value=''">
											<input type="text" class="input1" value="+/- 0 Days"  onblur="if(this.value=='') this.value='+/- 0 Days'" onFocus="if(this.value =='+/- 0 Days' ) this.value=''">
										</div>
										<div class="marg_top1">
											<div class="select1">
											<a href="#" class="marker_left"></a>
											<select><option>May 11</option><option>June 11</option><option>July 11</option></select>
											<a href="#" class="marker_right"></a>
											</div>
										</div>
										<div class="calendar">
											<ul class="thead">
												<li>Mon</li>
												<li>Tue</li>
												<li>Wed</li>
												<li>Thu</li>
												<li>Fri</li>
												<li>Sat</li>
												<li>Sun</li>
											</ul>
											<ul class="tbody">
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#">1</a></li>
												<li><a href="#">2</a></li>
												<li><a href="#">3</a></li>
												<li><a href="#">4</a></li>
												<li><a href="#" class="active">5</a></li>
												<li><a href="#">6</a></li>
												<li><a href="#">7</a></li>
												<li><a href="#">8</a></li>
												<li><a href="#">9</a></li>
												<li><a href="#">10</a></li>
												<li><a href="#">11</a></li>
												<li><a href="#">12</a></li>
												<li><a href="#">13</a></li>
												<li><a href="#">14</a></li>
												<li><a href="#">15</a></li>
												<li><a href="#">16</a></li>
												<li><a href="#">17</a></li>
												<li><a href="#">18</a></li>
												<li><a href="#">19</a></li>
												<li><a href="#">20</a></li>
												<li><a href="#">21</a></li>
												<li><a href="#">22</a></li>
												<li><a href="#">23</a></li>
												<li><a href="#">24</a></li>
												<li><a href="#">25</a></li>
												<li><a href="#">26</a></li>
												<li><a href="#">27</a></li>
												<li><a href="#">28</a></li>
												<li><a href="#">29</a></li>
												<li><a href="#">30</a></li>
												<li><a href="#">31</a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
											</ul>
										</div>
									</div>
								</div>
								<div class="wrapper pad_bot1">
									<span class="left">Passengers</span>
									<div class="cols marg_right1">
										<div class="row">
											<input type="text" class="input2" value="2"  onblur="if(this.value=='') this.value='2'" onFocus="if(this.value =='2' ) this.value=''">
											<span class="left">Adults</span>
											<a href="#" class="help"></a>
										</div>
										<div class="row">
											<input type="text" class="input2" value="0"  onblur="if(this.value=='') this.value='0'" onFocus="if(this.value =='0' ) this.value=''">
											<span class="left">Children</span>
											<a href="#" class="help"></a>
										</div>
									</div>
									<div class="cols">
										<div class="select1"><span class="left">Class</span><select><option>Economy</option></select><a href="#" class="help"></a></div>
										<div class="select1"><span class="left">Airline</span><select><option>Airlines</option></select><a href="#" class="help"></a></div>
									</div>
									<span class="right relative"><a href="#" class="button1" onClick="document.getElementById('form_6').submit()"><strong>Search</strong></a></span>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="tab-content" id="Rental">
					<form id="form_7" class="form_5" method="post">
						<div>
							<div class="radio">
								<div class="wrapper">
										<input type="radio" name="name1" checked><span class="left">Show prices</span>
										<input type="radio" name="name1"><span class="left">Show flights</span>
								</div>
							</div>
							<div class="pad">
								<div class="wrapper under">
									<div class="col1">
										<div class="row"><span class="left">From</span><input type="text" class="input"><a href="#" class="help"></a></div>
										<div class="row"><span class="left">To</span><input type="text" class="input"><a href="#" class="help"></a></div>
									</div>
									<div class="check_box"><input type="checkbox"><span>One way</span><a href="#" class="help"></a></div>
									<div class="check_box"><input type="checkbox"><span>Direct flights</span></div>
								</div>
								<div class="wrapper under">
									<span class="left">Flights</span>
									<div class="cols marg_right1">
										<h6>Outbound flight</h6>
										<div class="row">
											<input type="text" class="input1" value="03.05.2011"  onblur="if(this.value=='') this.value='03.05.2011'" onFocus="if(this.value =='03.05.2011' ) this.value=''">
											<input type="text" class="input1" value="+/- 0 Days"  onblur="if(this.value=='') this.value='+/- 0 Days'" onFocus="if(this.value =='+/- 0 Days' ) this.value=''">
										</div>
										<div class="marg_top1">
											<div class="select1">
											<a href="#" class="marker_left"></a>
											<select><option>May 11</option><option>June 11</option><option>July 11</option></select>
											<a href="#" class="marker_right"></a>
											</div>
										</div>
										<div class="calendar">
											<ul class="thead">
												<li>Mon</li>
												<li>Tue</li>
												<li>Wed</li>
												<li>Thu</li>
												<li>Fri</li>
												<li>Sat</li>
												<li>Sun</li>
											</ul>
											<ul class="tbody">
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#">1</a></li>
												<li><a href="#">2</a></li>
												<li><a href="#">3</a></li>
												<li><a href="#">4</a></li>
												<li><a href="#" class="active">5</a></li>
												<li><a href="#">6</a></li>
												<li><a href="#">7</a></li>
												<li><a href="#">8</a></li>
												<li><a href="#">9</a></li>
												<li><a href="#">10</a></li>
												<li><a href="#">11</a></li>
												<li><a href="#">12</a></li>
												<li><a href="#">13</a></li>
												<li><a href="#">14</a></li>
												<li><a href="#">15</a></li>
												<li><a href="#">16</a></li>
												<li><a href="#">17</a></li>
												<li><a href="#">18</a></li>
												<li><a href="#">19</a></li>
												<li><a href="#">20</a></li>
												<li><a href="#">21</a></li>
												<li><a href="#">22</a></li>
												<li><a href="#">23</a></li>
												<li><a href="#">24</a></li>
												<li><a href="#">25</a></li>
												<li><a href="#">26</a></li>
												<li><a href="#">27</a></li>
												<li><a href="#">28</a></li>
												<li><a href="#">29</a></li>
												<li><a href="#">30</a></li>
												<li><a href="#">31</a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
											</ul>
										</div>
									</div>
									<div class="cols">
										<h5>Outbound flight</h5>
										<div class="row">
											<input type="text" class="input1" value="03.05.2011"  onblur="if(this.value=='') this.value='03.05.2011'" onFocus="if(this.value =='03.05.2011' ) this.value=''">
											<input type="text" class="input1" value="+/- 0 Days"  onblur="if(this.value=='') this.value='+/- 0 Days'" onFocus="if(this.value =='+/- 0 Days' ) this.value=''">
										</div>
										<div class="marg_top1">
											<div class="select1">
											<a href="#" class="marker_left"></a>
											<select><option>May 11</option><option>June 11</option><option>July 11</option></select>
											<a href="#" class="marker_right"></a>
											</div>
										</div>
										<div class="calendar">
											<ul class="thead">
												<li>Mon</li>
												<li>Tue</li>
												<li>Wed</li>
												<li>Thu</li>
												<li>Fri</li>
												<li>Sat</li>
												<li>Sun</li>
											</ul>
											<ul class="tbody">
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#">1</a></li>
												<li><a href="#">2</a></li>
												<li><a href="#">3</a></li>
												<li><a href="#">4</a></li>
												<li><a href="#" class="active">5</a></li>
												<li><a href="#">6</a></li>
												<li><a href="#">7</a></li>
												<li><a href="#">8</a></li>
												<li><a href="#">9</a></li>
												<li><a href="#">10</a></li>
												<li><a href="#">11</a></li>
												<li><a href="#">12</a></li>
												<li><a href="#">13</a></li>
												<li><a href="#">14</a></li>
												<li><a href="#">15</a></li>
												<li><a href="#">16</a></li>
												<li><a href="#">17</a></li>
												<li><a href="#">18</a></li>
												<li><a href="#">19</a></li>
												<li><a href="#">20</a></li>
												<li><a href="#">21</a></li>
												<li><a href="#">22</a></li>
												<li><a href="#">23</a></li>
												<li><a href="#">24</a></li>
												<li><a href="#">25</a></li>
												<li><a href="#">26</a></li>
												<li><a href="#">27</a></li>
												<li><a href="#">28</a></li>
												<li><a href="#">29</a></li>
												<li><a href="#">30</a></li>
												<li><a href="#">31</a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
												<li><a href="#"></a></li>
											</ul>
										</div>
									</div>
								</div>
								<div class="wrapper pad_bot1">
									<span class="left">Passengers</span>
									<div class="cols marg_right1">
										<div class="form_row">
											<input type="text" class="input2" value="2"  onblur="if(this.value=='') this.value='2'" onFocus="if(this.value =='2' ) this.value=''">
											<span class="left">Adults</span>
											<a href="#" class="help"></a>
										</div>
										<div class="form_row">
											<input type="text" class="input2" value="0"  onblur="if(this.value=='') this.value='0'" onFocus="if(this.value =='0' ) this.value=''">
											<span class="left">Children</span>
											<a href="#" class="help"></a>
										</div>
									</div>
									<div class="cols">
										<div class="select1"><span class="left">Class</span>
                                            <select>
                                                @foreach (var item in Model)
                                                {
                                                    <option value="@item.Id">@item.ClassName</option>
                                                }
                                            </select>
											<a href="#" class="help"></a>
										</div>
										<div class="select1"><span class="left">Airline</span><select><option>Airlines</option></select>
											<a href="#" class="help"></a>
										</div>
									</div>
									<span class="right relative"><a href="#" class="button1" onClick="document.getElementById('form_7').submit()"><strong>Search</strong></a></span>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</article>
</div>
<script type="text/javascript"> Cufon.now(); </script>
<script>
	jQuery(document).ready(function($) {
		$('.form_5').jqTransform({imgPath:'jqtransformplugin/img/'});	
	});
	$(document).ready(function() {
		tabs2.init();
	});
</script>
